<template>
	<view class="order-list">
		<view class="list" v-for="(item, index) in list" :key="index">
			<view class="top" @click="toOrder(index)">
				<!-- 标题 -->
				<view class="title clearfix">
					<view class="fl">
						<image src="/static/images/nav_icon_store@2x.png" mode="widthFix" class="fl"></image>
						<text class="fl">{{item.enterpriseName||'-'}}</text>
						<image src="/static/images/middle_icon_next@2x.png" mode="widthFix" class="fl r-arr"></image>
					</view>
					<view class="fr" :class="item.orderStatus.id == 1 ? 'ff3428' : item.orderStatus.id == 2 ? 'ff3428' : (item.orderStatus.id == 3||item.orderStatus.id == 6) ? 'bfff57' : ''">{{item.orderStatus.name}}</view>
				</view>
				<!-- 内容 -->
				<view class="cont clearfix">
					<image :src="item.business.icon" mode="aspectFill" class="fl"></image>
					<view class="fl">
						<view class="tit">{{item.employeeName == null ? '' : item.employeeName }}({{item.business.name}})</view>
						<view>{{item.business.description}}</view>
						<view>下单时间： {{item.orderTime}}</view>
						<view>预约时间： {{item.appointmentDatetime}}</view>
					</view>
				<!-- 	<view class="fr">
						¥{{item.univalence}}
					</view> -->
				</view>
			</view>
			<!-- 支付 -->
			<view class="nav">
				<view class="price">合计：{{item.statusId == 1 && item.typeId ==1  ? '**' : item.price}}元</view>
				 
				<order-btn :orderId="item.id" :businessId="item.business.id" :orderBtn='JSON.parse(item.orderStatus.operation)'></order-btn>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderBtn from '@/components/button/OrderBtn.vue';
	export default {
		components:{
			OrderBtn
		},
		props: {
			list: {
				// 数据列表
				type: Array,
				default() {
					return [];
				}
			}
		},
		methods:{
			toOrder(index) {
				uni.navigateTo({
					url: '/pages/order/state?sid=' + this.list[index].id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top{
		width: 100%;
		overflow: hidden;
	}
	.list{
		width: 91.8%;
		margin-left: 4.1%;
		min-height: 280rpx;
		border-radius: 10rpx;
		border: 1rpx solid #EBECED;
		padding: 34rpx 26rpx;
		box-sizing:border-box;
		margin-bottom: 16rpx;
		overflow: hidden;
	}
	.list .title{
		height: 42rpx;
		line-height: 42rpx;
		color: #333;
		font-weight: 500;
		font-size: 30rpx;
		margin-bottom: 22rpx;
	}
	.list .title text{
		margin: 0 10rpx;
	}
	.list .title image{
		width: 27rpx;
		margin-top: 8rpx;
	}
	.list .title .r-arr{
		width: 13rpx;
		margin-top: 12rpx;
	}
	.list .title .fr{
		font-size: 28rpx;
		color: #999999;
	}
	.list .cont image{
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		margin-right: 18rpx;
	}
	.list .cont .fl{
		font-size: 24rpx;
		color: #999;
		line-height: 33rpx;
	}
	.list .cont .fl view{
		width: 429rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.list .cont .fl .tit{
		width: 100%;
		font-size: 26rpx;
		color: #333;
		line-height: 37rpx;
		margin-bottom: 4rpx;
	}
	.list .cont .fr{
		color: #666;
		font-size: 26rpx;
		letter-spacing: 0.74rpx;
		line-height: 37rpx;
		margin-top: 73rpx;
	}
	.list .nav{
		width: 100%;
		height: 33rpx;
		text-align: right;
		margin-top: 20rpx;
		font-size: 24rpx;
		line-height: 33rpx;
		color: #333;
		font-weight: 500;
	}
	.list .nav .price{
		margin-bottom: 28rpx;
	}
	.list .title .ff3428{
		color: #FF3428;
	}
	.list .title .bfff57{
		color: $uni-color1;
	}
</style>
